<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二级菜单</title>
    <link rel="stylesheet" href="css/menu.css">
</head>

<body>
    <nav>
        <ul class="menu-box">
            <li>
                <a href="javascript:;">HOME</a>
                <ul class="submenu">
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">ABOUT</a>
                <ul class="submenu">
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                    <li><a href="javascript:;">OPTIONS</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">TEAM</a>
            </li>
            <li>
                <a href="javascript:;">NEWS</a>
            </li>
            <li>
                <a href="javascript:;">JALLERY</a>
            </li>
            <li>
                <a href="javascript:;">CONTENT</a>
            </li>
        </ul>
    </nav>
    <p>当一个元素的 position 属性的值为 fixed 时，那它会相对于浏览器边界进行定位，并且当页面存在滚动条的时候，页面的滚动也不会对其和浏览器边界之间的相对位置产生影响，就像是“漂浮”在一个固定的地方一样，所且该定位方式也会脱离“文档流”，它和文档内的元素都不会有任何布局上的互相干扰。针对“固定定位”的这些特性，它通常用于以下情景：

            弹出框底部的“遮罩层”
            
            现在的网页设计基本不会再去采用浏览器引擎内自带的那种弹出提示框，而一般是开发者根据美工的要求自定义的弹出框，但自行设计的弹出框并不具备页面事件阻塞功能，为了防止用户“绕过”弹出框去继续对页面元素进行操作，绝大部分时候都会在弹出框下方（通过 z-index 设置层级关系）添加一层“遮罩”（这层遮罩可以是透明的，也可以是色彩半透明的），这样用户就不能再通过鼠标点击的方式去操作弹出框“下方”的内容了。
            
            页面浮动二维码</p>
</body>

</html>